<div>
  <div class="example-listbox-grid">
    <div class="example-listbox-container">
      <h4>Single Select - Able to navigate to and select an option.</h4>
      <cdk-listbox-single-select-example></cdk-listbox-single-select-example>
    </div>

    <div class="example-listbox-container">
      <h4>
        Multi Select - Able to select a range of options using shift + arrow keys, shift + home/end,
        and shift + clicking.
      </h4>
      <cdk-listbox-multi-select-example></cdk-listbox-multi-select-example>
    </div>

    <div class="example-listbox-container">
      <h4>Single Select w/ Selection Follows Focus</h4>
      <cdk-listbox-single-select-follow-focus-example></cdk-listbox-single-select-follow-focus-example>
    </div>

    <div class="example-listbox-container">
      <h4>
        Multi Select w/ Selection Follows Focus - Able to navigate without changing selection by
        holding ctrl while navigating.
      </h4>
      <cdk-listbox-multi-select-follow-focus-example></cdk-listbox-multi-select-follow-focus-example>
    </div>

    <div class="example-listbox-container">
      <h4>Horizontal Orientation - Able to navigate using left and right arrow keys.</h4>
      <cdk-listbox-horizontal-example></cdk-listbox-horizontal-example>
    </div>

    <div class="example-listbox-container">
      <h4 dir="rtl">RTL & Horizontal Orientation - Able to navigate through the list as expected.</h4>
      <cdk-listbox-rtl-horizontal-example></cdk-listbox-rtl-horizontal-example>
    </div>

    <div class="example-listbox-container">
      <h4>Active Descendant - Able to navigate to and select an option.</h4>
      <cdk-listbox-active-descendant-example></cdk-listbox-active-descendant-example>
    </div>

    <div class="example-listbox-container">
      <h4>Disabled Options are Focusable - Able to navigate to a disabled option. Disabled options are not selectable (including range selection).</h4>
      <cdk-listbox-disabled-focusable-example></cdk-listbox-disabled-focusable-example>
    </div>

    <div class="example-listbox-container">
      <h4>Disabled Options are Skipped - Disabled options are skipped over. Disabled options are not selectable (including range selection).</h4>
      <cdk-listbox-disabled-skipped-example></cdk-listbox-disabled-skipped-example>
    </div>

    <div class="example-listbox-container">
      <h4>Readonly - The listbox is navigable but selection state cannot be changed.</h4>
      <cdk-listbox-readonly-example></cdk-listbox-readonly-example>
    </div>

    <div class="example-listbox-container">
      <h4>Disabled - Focus should land on the listbox instead of an option.</h4>
      <cdk-listbox-disabled-example></cdk-listbox-disabled-example>
    </div>
  </div>

  <div class="example-configurable-listbox-container">
    <h4>Configurable Listbox</h4>
    <cdk-listbox-configurable-example></cdk-listbox-configurable-example>
  </div>
</div>
